<template>
	<view class="info">
		<public-module></public-module>
		<view class="u-page">
			<view  class="user">
				<view>
					<u-avatar size="60" :src="ossUrl + userinfo.headimgurl"></u-avatar>
				</view>
				<view class="user-info">
					<view class="user-info-name">
						<view>
							<text v-if="!isEditName">{{name}}</text>
							<u--input  v-if="isEditName" border="surround" v-model="name" ></u--input>
						</view>
						<image @click="isEditName = !isEditName" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;margin-top: 8rpx;" src="/static/bi.png"></image>
					</view>
					<view class="user-info-tel">
						{{userinfo.tel?userinfo.tel:''}}
					</view>
					
				</view>
			</view>
			<view class="from1">
				<view class="from1-title">裸眼视力</view>
				<view class="from1-val">
					<view class="from1-val-left">
						<view class="from1-val-left-title">
							R:
						</view>
						<view @click="RShow =true">
							<u--input border="surround" inputAlign="center" placeholder="请选择" suffixIcon="/static/staff/jiao.png" suffixIconStyle="width:20rpx;height:20rpx;margin-right: 16rpx;" clearable readonly v-model="datas.content.R"></u--input>
						</view>
					</view>
					<view class="from1-val-right">
						<view class="from1-val-left-title">
							L:
						</view>
						<view @click="LShow =true">
							<u--input border="surround" inputAlign="center" placeholder="请选择" suffixIcon="/static/staff/jiao.png" suffixIconStyle="width:20rpx;height:20rpx;margin-right: 16rpx;" clearable readonly v-model="datas.content.L"></u--input>
						</view>
					</view>
				</view>
				<view class="from1-title" style="margin-top: 32rpx;">验光</view>
				
				<view class="from1-vals">
					<view class="from1-vals-left">
						<view class="from1-vals-left-title">
							 R 
						</view>
						<view class="from1-vals-left-all">
							<view class="from1-vals-left-all-title">
								S:
							</view>
							<u--input border="surround" inputAlign="center" placeholder="请输入" type="number"  v-model="datas.content.rs" ></u--input>
						</view>
						<view class="from1-vals-left-all">
							<view class="from1-vals-left-all-title">
								C:
							</view>
							<u--input border="surround" inputAlign="center" placeholder="请输入" type="number"  v-model="datas.content.rc" ></u--input>
						</view>
						<view class="from1-vals-left-all">
							<view class="from1-vals-left-all-title">
								A:
							</view>
							<u--input border="surround" inputAlign="center" placeholder="请输入" type="number"  v-model="datas.content.ra" ></u--input>
						</view>
					</view>
					<view class="from1-vals-right">
						<view class="from1-vals-right-title">
							 L 
						</view>
						<view class="from1-vals-right-all">
							<view  class="from1-vals-right-all-title">
								S:
							</view>
							<u--input border="surround" inputAlign="center" placeholder="请输入" type="number"  v-model="datas.content.ls" ></u--input>
						</view>
						<view class="from1-vals-right-all">
							<view class="from1-vals-right-all-title">
								C:
							</view>
							<u--input border="surround" inputAlign="center" placeholder="请输入" type="number"  v-model="datas.content.lc" ></u--input>
						</view>
						<view class="from1-vals-right-all">
							<view class="from1-vals-right-all-title">
								A:
							</view>
							<u--input border="surround" inputAlign="center" placeholder="请输入" type="number"  v-model="datas.content.la" ></u--input>
						</view>
					</view>
				</view>
				
				<!-- <view class="from1-val">
					<view class="from1-val-left">
						<view class="from1-val-left-title">
							R:
						</view>
						<u--input border="surround" placeholder="请选择" suffixIcon="/static/staff/jiao.png" suffixIconStyle="width:20rpx;height:20rpx;margin-right: 16rpx;" clearable readonly v-model="value" @change="change"></u--input>
					</view>
					<view class="from1-val-right">
						<view class="from1-val-left-title">
							L:
						</view>
						<u--input border="surround" placeholder="请选择" suffixIcon="/static/staff/jiao.png" suffixIconStyle="width:20rpx;height:20rpx;margin-right: 16rpx;" clearable readonly v-model="value" @change="change"></u--input>
					</view>
				</view>
				<view class="from1-val">
					<view class="from1-val-left">
						<view class="from1-val-left-title">
							OS:
						</view>
						<u--input border="surround" placeholder="请选择" suffixIcon="/static/staff/jiao.png" suffixIconStyle="width:20rpx;height:20rpx;margin-right: 16rpx;" clearable readonly v-model="value" @change="change"></u--input>
					</view>
					<view class="from1-val-right">
						<view class="from1-val-left-title">
							OS:
						</view>
						<u--input border="surround" placeholder="请选择" suffixIcon="/static/staff/jiao.png" suffixIconStyle="width:20rpx;height:20rpx;margin-right: 16rpx;" clearable readonly v-model="value" @change="change"></u--input>
					</view>
				</view> -->
				<view class="from1-title" style="margin-top: 32rpx;">其他</view>
				<view class="from1-val">
					
					<view class="from1-val-left">
						<view class="from1-val-left-title">
							瞳距:
						</view>
						<u--input border="surround" inputAlign="center" placeholder="请输入" type="number" v-model="datas.content.pd" ></u--input>
					</view>
					<view class="from1-val-right">
						<view class="from1-val-left-title">
							渠道:
						</view>
						<u--input border="surround" inputAlign="center" placeholder="请输入" type="number" v-model="datas.content.channel" ></u--input>
					</view>
				</view>
				
				<view class="from1-title" style="margin-top: 32rpx;">备注</view>
				<view class="from1-val">
					<u--textarea v-model="datas.content.remark" placeholder="请输入内容" ></u--textarea>
				</view>
				
			</view>
			<view class="from2">
				<view class="from2-title">
					<view class="from2-title-left">验光单上传</view>
					<view class="from2-title-right">上传至少一张照片</view>
				</view>
				<view class="from2-img">
					<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="3"
							width="188rpx"
							height="188rpx"
						></u-upload>
				</view>
			</view>
			<view class="from3">
				<view class="from3-all">
					<view class="from3-all-title">成交价</view>
					<view class="from3-all-input">
						<u--input border="bottom" inputAlign="center" type="number"   v-model="datas.price"></u--input>
					</view>
				</view>
				<view class="from3-all">
					<view class="from3-all-title">销售</view>
					<view class="from3-all-input" @click="saleShow = true">
						<u--input border="bottom" inputAlign="center" readonly clearable v-model="datas.sale"></u--input>
					</view>
				</view>
				<view class="from3-all">
					<view class="from3-all-title">验光</view>
					<view class="from3-all-input" @click="optometryShow = true">
						<u--input border="bottom" inputAlign="center" readonly clearable v-model="datas.optometry"></u--input>
					</view>
					
				</view>
				<view class="from3-all">
					<view class="from3-all-title">加工</view>
					<view class="from3-all-input" @click="processShow = true">
						<u--input border="bottom" inputAlign="center" readonly clearable v-model="datas.process"></u--input>
					</view>
				</view>
			</view>
			<view class="butall">
				<button  class="but" @click="preserve()">保存</button>
			</view>
		</view>
		<u-picker closeOnClickOverlay @close="RShow =false" :show="RShow" @cancel="RShow =false" @confirm="confirmRShow" :columns="R">裸眼R</u-picker>
		<u-picker closeOnClickOverlay @close="LShow =false" :show="LShow" @cancel="LShow =false" @confirm="confirmLShow" :columns="L">裸眼L</u-picker>
		<u-picker closeOnClickOverlay @close="saleShow =false" :show="saleShow" @cancel="saleShow =false" @confirm="confirmsaleShow" keyName="name"  :columns="sales">销售</u-picker>
		<u-picker closeOnClickOverlay @close="optometryShow =false" :show="optometryShow" @cancel="optometryShow =false" @confirm="confirmoptometryShow" :columns="optometrys">验光</u-picker>
		<u-picker closeOnClickOverlay @close="processShow =false" :show="processShow" @cancel="processShow =false" @confirm="confirmprocessShow" :columns="processs">加工</u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { fromInfo,fromEdit } from '@/config/api.js';
	import { courtConfig } from '@/config/baseUrl.js';
	import base from '@/config/baseUrl';
	export default {
		data() {
				return {
					RShow:false,
					LShow:false,
					saleShow:false,
					optometryShow: false,
					processShow: false,
					R: [
						['4.0','4.1','4.2', '4.3','4.4', '4.5', '4.6', '4.7','4.8', '4.9', '5.0', '5.1', '5.2', '5.3']
					],
					L: [
						['4.0','4.1','4.2', '4.3','4.4', '4.5', '4.6', '4.7','4.8', '4.9', '5.0', '5.1', '5.2', '5.3']
					],
					sales: [],
					optometrys: [],
					processs: [],
					img:'',
					fileList1: [],
					datas:{content:{}},
					id:0,
					user_id:0,
					userinfo:{},
					baseUrl:base.baseUrl,
					ossUrl:base.ossUrl,
					
					isEditName:false,
					name:'',
				};
			},
			onLoad(option) {
				this.id = option.id;
				this.user_id = option.user_id;
				// this.user_id = 3
				this.storeinfo()
			},
			methods: {
				confirmRShow(e) {
					this.datas.content.R = e.value[0];
					this.RShow =false
				},
				confirmLShow(e) {
					this.datas.content.L = e.value[0];
					this.LShow =false
				},
				confirmsaleShow(e) {
					this.datas.sale =  e.value[0].name;
					this.datas.saleid =  e.value[0].id;
					this.saleShow =false
				},
				confirmoptometryShow(e) {
					this.datas.optometry =  e.value[0];
					this.optometryShow =false
				},
				confirmprocessShow(e) {
					this.datas.process =  e.value[0];
					this.processShow =false
				},
				
				// 删除图片
				deletePic(event) {
					this[`fileList${event.name}`].splice(event.index, 1)
				},
				// 新增图片
				async afterRead(event) {
					// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					let lists = [].concat(event.file)
					let fileListLen = this[`fileList${event.name}`].length
					lists.map((item) => {
						this[`fileList${event.name}`].push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}
				},
				uploadFilePromise(url) {
					let _this =this;
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: _this.baseUrl+'/base/uplode', // 仅为示例，非真实的接口地址
							filePath: url,
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								let data =JSON.parse(res.data);
								setTimeout(() => {
									resolve(data.data.url)
								}, 1000)
							}
						});
					})
				},
				//店详情和数据详情
				storeinfo()
				{
					let _this =this;
					let httpData={
						id:_this.id,
						user_id:_this.user_id
					};
					fromInfo(httpData).then((res) => {
						_this.userinfo = res.userinfo
						_this.name = res.userinfo.name? res.userinfo.name: res.userinfo.nickname
						_this.sales = res.sales
						_this.optometrys = res.optometrys
						_this.processs = res.processs
						if(_this.id > 0)
						{
							console.log(res.data)
							_this.datas = res.data
							for(var i=0;i<res.data.content.img.length;i++)
							{
								res.data.content.img[i].url = _this.ossUrl + res.data.content.img[i].url
							}
							_this.fileList1 = res.data.content.img
						}
					}).catch((err) =>{
						
					})
				},
				//提交表单
				preserve()
				{
					
					let _this =this;
					let httpData={
						datas:JSON.stringify(_this.datas),
						fileList1:JSON.stringify(_this.fileList1),
						id:_this.id,
						user_id:_this.user_id,
						name:_this.name
					};
					fromEdit(httpData).then((res) => {
						console.log(res)
						if(res.code == 0)
						{
							_this.id = res.id
						}
						this.$refs.uToast.show({ title:'提示',message:res.message})
					}).catch((err) =>{
						
					})
					
				}
				
			},
			
			
			
	}
</script>

<style lang="scss">
	page{
		background-color: #ecfaf1;
	}
	.u-page{
		box-sizing: border-box;
		padding: 0 32rpx;	
		.user{
			box-sizing: border-box;
			background-color: #fff;
			border-radius:10rpx;
			width: 686rpx;
			height: 176rpx;
			padding: 24rpx 0 0 46rpx ;
			margin-top: 20rpx;
			display: flex;
			&-info
			{
				.u-input{
					padding: 0 !important;
				}
				margin: 10rpx 0 0 30rpx;
				&-name{
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
					display: flex;
				}
				&-tel{
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #333333;
					
				}
			}
		}
		.from1{
			.u-input{
				padding: 0 !important;
				width: 220rpx;
				height: 40rpx;
			}
			box-sizing: border-box;
			padding: 24rpx 32rpx;
			width: 686rpx;
			height:800rpx;
			background-color: #fff;
			border-radius:10rpx;
			margin-top: 24rpx;
			&-title{
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
				
			}
			&-val{
				display: flex;
				margin-top: 20rpx;
				&-left{
					display: flex;
					width: 311rpx;
					&-title{
						width: 80rpx;
						
					}
				}
				&-right{
					margin-left: 40rpx;
					display: flex;
					width: 311rpx;
				}
			}
			&-vals{
				display: flex;
				justify-content: space-between;
				&-left{
					&-title{
						text-align: center;
					}
					&-all{
						&-title{
							width: 80rpx;
						}
						display: flex;
						margin-top: 10rpx;
					}
				}
				&-right{
					margin-left: 40rpx;
					&-title{
						text-align: center;
					}
					&-all{
						
						&-title{
							width: 80rpx;
						}
						display: flex;
						margin-top: 10rpx;
						
					}
				}
			}
			
		}
		
		
		
		
		
		.from2{
			box-sizing: border-box;
			padding: 24rpx 32rpx;
			width: 686rpx;
			height: 340rpx;
			background-color: #fff;
			border-radius:10rpx;
			margin-top: 24rpx;
			&-title{
				display: flex;
				&-left{
					font-size: 32rpx;
					color: #333333;
					font-weight: 600;
				}
				&-right{
					font-size: 24rpx;
					color: #AAAAAA;
					margin-top: 10rpx;
					margin-left: 32rpx;
				}
			}
			&-img{
				margin-top: 38rpx;
			}
		}
		.from3{
			width: 686rpx;
			height: 312rpx;
			background-color: #fff;
			border-radius:10rpx;
			margin-top: 24rpx;
			padding: 0 32rpx;
			&-all{
				display: flex;
				&-title{
					margin-top: 30rpx;
					width:125rpx;
					color: #333333 ;
					font-size: 28rpx;
				}
				&-input{
					width: 100%;
				}
			}
		}
		.butall{
			margin-top: 24rpx;
			padding: 50rpx 150rpx;
			.but{
				background-color: #F93648;
				color: #fff;
				border-radius:50rpx;
				
			}
		}
	}

</style>
